<!--成人接种-->
<template>
    <div class="inoculate-history">

        <div class="table-con" :style="{ height: height-160+'px'}">
            <div :style="{ height: height-160+'px'}" style="overflow: scroll">
                <Table :columns="columns1" :data="list"></Table>
            </div>

            <div class="bottom-btn">
                <Button class="add" @click="recordVisible=true">新增接种记录</Button>
                <Button class="back">返 回</Button>
            </div>
        </div>

        <inoculate-record  :visible.sync="recordVisible"
                           :babytype="babytype" @saveIno="saveIno"></inoculate-record>
    </div>
</template>

<script>
    import {showino, deleteino} from '@/api/inoculate/inoculate';
    import inoculateRecord from '@/views/inoculate/components/inoculateRecord'

    export default {
        data(){
            return {
                list:[],
                height: document.documentElement.clientHeight,
                recordVisible: false,

                columns1: [
                    {
                        title: '疫苗名称',
                        key: 'vaccinename',
                        render: (h, params) => {
                            return h('span',params.row.vaccinename?params.row.vaccinename:'-');
                        }
                    },
                    {
                        title: '剂次',
                        key: 'dose',
                        render: (h, params) => {
                            return h('span',params.row.dose?params.row.dose:'-');
                        }
                    },
                    {
                        title: '接种日期',
                        key: 'inotime',
                        render: (h, params) => {
                            return h('span',params.row.inotime?params.row.inotime:'-');
                        }
                    },
                    {
                        title: '接种部位',
                        key: 'position',
                        render: (h, params) => {
                            return h('span',params.row.position?params.row.position:'-');
                        }
                    },
                    {
                        title: '疫苗批号',
                        key: 'batchno',
                        render: (h, params) => {
                            return h('span',params.row.batchno?params.row.batchno:'-');
                        }
                    },
                    {
                        title: '疫苗效期',
                        key: 'vilidate',
                        render: (h, params) => {
                            return h('span',params.row.vilidate?params.row.vilidate:'-');
                        }
                    },
                    {
                        title: '生产企业',
                        key: 'address',
                        render: (h, params) => {
                            return h('span',params.row.address?params.row.address:'-');
                        }
                    },
                    {
                        title: '疫苗厂家',
                        key: 'vaccinecompany',
                        render: (h, params) => {
                            return h('span',params.row.vaccinecompany?params.row.vaccinecompany:'-');
                        }
                    },
                    {
                        title: '接种单位',
                        key: 'inocompany',
                        render: (h, params) => {
                            return h('span',params.row.inocompany?params.row.inocompany:'-');
                        }
                    },
                    {
                        title: '接种医生',
                        key: 'doctor',
                        render: (h, params) => {
                            return h('span',params.row.doctor?params.row.doctor:'-');
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            deleteino({
                                                id: params.row.id
                                            }).then((res) => {
                                                if(res.data.error==0){
                                                    this.getData();
                                                }
                                            })
                                        }
                                    }
                                }, '删除'),
                            ])
                        }
                    }
                ],
                babytype: null
            }
        },
        mounted(){
            this.getData();
        },
        computed:{
            peopleid () {
                return this.$route.query.peopleid;
            },
            babyTypes(){
                return this.$route.query.babyTypes;
            }
        },
        methods:{
            getData(){
                showino({
                    peopleid: this.peopleid,
                    babytype: this.babyTypes
                }).then((res) => {
                    if(res.data.error==0){
                        this.list = res.data.list;
                    }
                })
            },
            saveIno(val){
                if(val==true){
                    this.getData();
                }
            }
        },
        components:{
            inoculateRecord
        }
    }
</script>

<style lang="less">
    .inoculate-history{
        .btn-wrapper{
            background: #fff;
            margin:20px 0;
            padding:10px 0;
            text-align: center;
            .ivu-btn{
                width:160px;
                height:44px;
                font-size: 14px;
                background:rgba(209,217,238,1);
                color:rgba(255,255,255,1);
                border-radius: 0;
                border:none;
                &:nth-child(2){
                    margin-left:-5px;
                }
                &.active{
                    background:rgba(138,130,249,1);
                }
                &:focus{
                    box-shadow: none;
                }
            }
        }
        .table-con{
            background: #fff;
            .bottom-btn{
                position: absolute;
                bottom: 0;
                width:98%;
                text-align: center;
                background: #fff;
                padding:10px 0;
                .add{
                    width:160px;
                    height:48px;
                    background:rgba(93,140,254,1);
                    border-radius:6px;
                    color:rgba(255,255,255,1);
                    font-size: 14px;
                }
                .back{
                    width:160px;
                    height:48px;
                    background:rgba(209,217,238,1);
                    border-radius:6px;
                    color:rgba(255,255,255,1);
                    font-size: 14px;
                }
            }
        }
    }
</style>
